<template>
  <div class="bor-col">
    <codemirror
        ref="codeEdit"
        v-model="content"
        :options="codeOptions"
        @input="handleChange"
        class="code">
    </codemirror>
  </div>
</template>

<script>
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import "codemirror/theme/ayu-dark.css";
import "codemirror/theme/idea.css";
// 核心样式
import 'codemirror/lib/codemirror.css'


import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'
// keyMap

import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/emacs.js'
// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'

export default {
  name: "CodeEdit",
  props: {
    value: {
      type: String,
      default: ''
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    language: {
      type: String,
      default: 'java'
    },
    theme: {
      type: String,
      default: 'idea'
    }
  },
  data(){
    return{
      codeOptions: {
        value: this.value,
        mode: `text/x-${this.language}`,
        theme: this.theme,
        lineNumbers: true,
        readOnly: this.readOnly,
        tabSize: 2
      },
      content: this.value
    }
  },
  created() {

  },
  computed:{
  },
  methods: {
    refresh(){
      this.$refs.codeEdit.refresh()
    },
    handleChange(value) {
      this.content = value
      this.$emit('input', value)
    },
    handleFullScreen(value) {
    }
  },
  watch: {
    value(val){
      this.content = val
    },
  },
  mounted() {
  }
}
</script>

<style scoped>
  .bor-col{
    border: 1px solid #DCDFE6;
  }
</style>